<template>
  <div style="min-height:100vh;">
      <div style="margin-top: 20px;">
          <!-- 搜索 -->
          <el-input size="small" v-model="input_name" placeholder="请输入评论人名称，可回车搜索..." prefix-icon="el-icon-search"
          style="width: 400px;margin-right: 10px;" @keydown.enter.native="search_name"></el-input>
          <el-button size="small" type="primary"  @click="search_name" icon="el-icon-search">搜索</el-button>
          <!-- <el-button size="small" type="success"  @click="dialog_add = true" icon="el-icon-plus">新增</el-button> -->
      </div>
      <div>
          <el-table
          :data="commentData"
          style="width: 100%">
          <el-table-column
            label="编号"
            width="70">
            <template slot-scope="scope"> 
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="昵称"
            width="150">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.nickname }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="身份"
            width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.adminComment" type="danger" size="medium">管理员</el-tag>
              <el-tag v-if="!scope.row.adminComment" size="medium">游客</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="评论内容"
            width="300">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.content }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="发表时间"
            width="230">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.createTime }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="ip地址"
            width="180">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.ip }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="头像"
            width="230">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.avatar }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="博客id"
            width="200">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.blogId }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="父评论id"
            width="100">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.parentCommentId }}</el-tag>
            </template>
          </el-table-column>


          <el-table-column label="操作"  fixed="right" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleLook(scope.$index, scope.row)">回复</el-button>
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div style="margin-top: 20px;" v-if="showPage">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
      </div>

      <!-- 对话框 回复评论 -->
      <el-dialog
        title="回复评论"
        :visible.sync="dialog_look"
        width="30%"
      >
      <el-form status-icon  label-width="80px" :model="subComment" ref="subComment">
        <el-form-item label="文章：">
          {{BackComment.blogTitle}}
        </el-form-item>
        <el-form-item label="昵称：">
          {{BackComment.nickname}}
        </el-form-item>
        <el-form-item label="内容：">
          {{BackComment.content}}
        </el-form-item>
        <el-form-item label="日期：">
          {{BackComment.time}}
        </el-form-item>
        <el-form-item label="回复：" prop="content"
         :rules=" { required: true, message: '请输入评论内容', trigger: 'blur' }">
          <el-input type="textarea" v-model="subComment.content"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog_look = false">取 消</el-button>
          <el-button type="primary" @click="submitBackComment('subComment')">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 对话框 编辑评论 -->
      <!-- <el-dialog
      title="编辑评论"
      :visible.sync="dialog_edit"
      width="30%"
      >
      <el-form status-icon  label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="type_edit.name"
          :rules="{required: true, message: '文章类型不能为空', trigger: 'blur'}"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog_edit = false">取 消</el-button>
          <el-button type="primary" @click="updateType">确 定</el-button>
        </span>
      </el-dialog> -->

  </div>
</template>

<script>
export default {
  name: 'CommentBlog',
  data () {
   return {
      commentData:[],  //评论数据
      currentPage: 1,  //当前页
      total:0, //总记录数
      pagesize:5, //页面大小
      input_name:'', //搜索框值
      dialog_add: false, //添加评论的对话框
      dialog_edit: false, //编辑评论的对话框
      type_edit:{
        id:'',
        name:''
      },
      showPage: true, //是否显示分页
      dialog_look: false, //显示回复的对话框
      BackComment: { 
        blogTitle: '',
        nickname: '',
        content: '',
        time: '',
      }, 
      subComment:{ 
        blogId:'',
        parentCommentId:'',
        adminComment:'',
        nickname:'小L-Admin',
        content:'', //回复评论的内容
        email:'1556187290@qq.com'
      }
   }
  },
  mounted() {
    this.initComment();
  },
  methods:{
    //初始化评论数据
    initComment(){
      const _this = this
      this.getRequest('/comment/getCommentByPage?current=' + this.currentPage + '&size=' + this.pagesize).then(resp=>{
        console.log(resp)
        _this.commentData = resp.records
        _this.total = resp.total
      })
    },
    //查看评论
    handleLook(index, row){
      console.log(row)
      const _this = this
      _this.dialog_look = true
      this.getRequest('/blog/getByBlogId?id=' + row.blogId).then(resp=>{
        console.log(resp)
        _this.BackComment.blogTitle = resp.obj.title
      })
      _this.BackComment.nickname = row.nickname
      _this.BackComment.content = row.content
      _this.BackComment.time = row.createTime

      _this.subComment.blogId = row.blogId
      _this.subComment.parentCommentId = row.parentCommentId
      _this.subComment.adminComment = true
    },
    //提交回复
    submitBackComment(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          this.postRequest('/comment/comments',this.subComment).then(resp=>{
            console.log(resp)
            _this.initComment()
            _this.BackComment.backComment = ''
            _this.dialog_look = false
            this.$message({ message: '回复评论成功！',type: 'success' });
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //编辑评论
    handleEdit(index, row) {
      const _this = this
      console.log(index, row);
      this.dialog_edit = true
      this.getRequest('/type/getTypeById?id=' + row.id).then(resp=>{
          console.log(resp)
          _this.type_edit = resp.obj
      })
    },
    //更新评论
    updateType(){
      const _this = this 
      this.putRequest('/type/updateType',this.type_edit).then(resp=>{
        if(resp){
          this.initComment()
          _this.dialog_edit = false
        }
      })
    },
    //删除评论
    handleDelete(index, row) {
      console.log(index, row);
      const _this = this
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/comment/deleteComment?id=' + row.id).then(resp=>{
            if(resp){
              this.initComment()
              this.$message({
                type: 'success',
                message: '已删除该评论'
              });     
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
    },
    //搜索评论
    search_name(){
       const _this = this
       this.getRequest('/comment/comments?nickname=' + this.input_name).then(resp=>{
         console.log(resp)
         if(_this.input_name == ''){
           _this.initComment();
           _this.showPage = true
         }else{
          _this.commentData = resp
          _this.showPage = false
          _this.input_name = ''
         }
         

       })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.initComment()
    }
  }
}
</script>

<style scoped>

</style>